<template>
  <div
    class="index-frame"
    v-if="!InfoList"
    v-loading="!InfoList"
    style="height: 100vh"
  ></div>
  <div class="main" v-else>
    <div>
      <PositionBar :crumbs="InfoList.crumbs" :type="2" />
      <div class="left-list-content">
        <div v-for="i in InfoList.pageInfoVos" :key="i.id">
          <div class="list-items">
            <div @click="gotoDetail(i.id)">
              <img :src="i.imgUrl" alt="" class="list-item-img" />
            </div>
            <div class="list-item-box">
              <div class="list-item-title" @click="gotoDetail(i.id)">
                {{ i.title }}
              </div>
              <!-- <div class="list-item-content">{{i.introduction}}</div> -->
              <div class="list-item-html" style="height:76px">
                <div v-html="i.introduction"></div>
              </div>
              <div style="display: flex">
                <div class="list-item-origin">{{ i.origin }}</div>
                <div class="list-item-origin" style="margin-left:30px">{{ i.createTime }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <p v-html="InfoList.info.content" class="html-style"></p> -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="InfoList.total"
            :page-size="InfoList.pageSize"
            v-model:currentPage="InfoList.curPage"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
          <div class="flex layout">
            第<span>{{
              InfoList.curPage +
              "/" +
              Math.ceil(InfoList.total / InfoList.pageSize)
            }}</span
            >页到第
            <el-input
              size="mini"
              class="el-pagination__editor is-in-pagination"
              :min="1"
              :max="99"
              v-model="pageNum"
              type="number"
            />
            页
            <el-button
              @click="changPageNum"
              type="success"
              style="margin-left: 10px"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="type-card">
        <div class="title-box">
          <div class="title">分类索引</div>
        </div>
        <div class="type-box">
          <div v-for="(i, index) in InfoList.thirdTypeVos" :key="index">
            <div
              :class="
                route.params.secondId == i.id ? 'choose-items' : 'type-items'
              "
              @click="changeThirdType(i.id)"
            >
              {{ i.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="top-ten">
        <div class="right">
          <div class="left-title">文章排行</div>
          <div class="right-box-content">
            <div class="items">
              <div class="num-style" style="background: #f54446; color: #fff">
                1
              </div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[0].id)"
              >
                {{ InfoList.rankInfoVos[0].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style" style="background: #f9b002; color: #fff">
                2
              </div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[1].id)"
              >
                {{ InfoList.rankInfoVos[1].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style" style="background: #47b752; color: #fff">
                3
              </div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[2].id)"
              >
                {{ InfoList.rankInfoVos[2].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style">4</div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[3].id)"
              >
                {{ InfoList.rankInfoVos[3].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style">5</div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[4].id)"
              >
                {{ InfoList.rankInfoVos[4].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style">6</div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[5].id)"
              >
                {{ InfoList.rankInfoVos[5].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style">7</div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[6].id)"
              >
                {{ InfoList.rankInfoVos[6].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style">8</div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[7].id)"
              >
                {{ InfoList.rankInfoVos[7].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style">9</div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[8].id)"
              >
                {{ InfoList.rankInfoVos[8].title }}
              </div>
            </div>
            <div class="items">
              <div class="num-style">10</div>
              <div
                class="text-title"
                @click="gotoDetail(InfoList.rankInfoVos[9].id)"
              >
                {{ InfoList.rankInfoVos[9].title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import PositionBar from "@/components/PositionBar.vue";

import { onBeforeMount, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = ref(useRoute());
const params = ref(useRoute().params);
const paramsList = params.value.param.split("_");
const InfoList = ref(null);
const pageNum = ref(paramsList[3] || 1);
const thridId = ref(paramsList[2]);
const secondId = ref(paramsList[1]);
const firstId = ref(paramsList[0]);
const gotoDetail = (id) => {
  // router.push({
  //   name: "information-detail",
  //   params: { id: id },
  // });
  const { href } = router.resolve({
    name: "information-detail",
    params: {
      id: id,
    },
  });
  window.open(href, "_blank");
};
const getData = (pageNum,isBlank=true) => {
  const { href } = router.resolve({
    name: "information-list",
    params: {
      param: `${firstId.value}_${secondId.value}_${thridId.value}_${
        pageNum || pageNum.value
      }`,
    },
  });
  window.open(href, isBlank?"_blank":'_self');
};
const handleCurrentChange = (pageNum) => {
  getData(pageNum);
};
const changPageNum = () => {
  getData(pageNum.value,false);
};
const changeThirdType = (id) => {
  thridId.value = id;
  getData(1,false);
};
onMounted(() => {
  axios
    .get(
      `/api/download/info/page/${firstId.value}_${secondId.value}_${thridId.value}_${pageNum.value}.html`
    )
    .then((res) => {
      InfoList.value = res.data.data;
    });
});
</script>
<style lang="less" scoped>
.main {
  display: flex;
  justify-content: center;
  .list-items {
    height: 140px;
    display: flex;
    border-bottom: 1px solid #f5f7f8;
    margin-bottom: 20px;
    color: #1d2127;
    border-radius: 8px;
    &:hover {
      background-color: #eee;
      // color: @link-color;
    }
    .list-item-img {
      width: 180px;
      height: 120px;
      border-radius: 8px;
      margin-right: 20px;
      cursor: pointer;
    }
    .list-item-box {
      margin-left: 20px;
      .list-item-title {
        cursor: pointer;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        // color: #1d2127;
        &:hover {
          color: @link-color;
        }
      }
      .list-item-html /deep/ span {
        width: 557px;
        height: 76px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #545759;
      }
      .list-item-origin {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #545759;
      }
    }
  }
  .left-list-content {
    width: 793px;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px 20px 20px 0px;
    .html-style {
      margin-top: 20px;
    }
    ::v-deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
      background-color: #47b752;
    }

    ::v-deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
      color: #47b752;
    }
    ::v-deep(.el-input__inner:focus) {
      border-color: #47b752;
    }
  }

  .type-card {
    width: 387px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 49px;
    margin-bottom: 20px;
    .title-box {
      height: 50px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      padding: 0px 20px;
      .title {
        font-size: 20px;
        line-height: 50px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1d2127;
      }
    }
    .type-box {
      padding: 20px;
      padding-right: 5px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      .type-items {
        cursor: pointer;
        margin-right: 12px;
        margin-bottom: 12px;
        width: 108px;
        height: 40px;
        background: #f5f7f8;
        border-radius: 4px;
        line-height: 40px;
        text-align: center;
        &:hover {
          background-color: #47b752;
          color: #fff;
        }
      }
      .choose-items {
        cursor: pointer;
        margin-right: 12px;
        margin-bottom: 12px;
        width: 108px;
        height: 40px;
        background: #47b752;
        color: #ffffff;
        border-radius: 4px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
  .top-ten {
    .right {
      width: 387px;
      height: 444px;
      background: #ffffff;
      border-radius: 8px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .left-title {
        height: 50px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        font-size: 20px;
        line-height: 50px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1d2127;
      }
      .right-box-content {
        padding: 20px 25px;
        .items {
          display: flex;
          margin-bottom: 16px;
          cursor: pointer;
          font-size: 14px;
          .num-style {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            text-align: center;
            font-weight: 500;
            line-height: 20px;
            background: #f5f7f8;
            color: #93999e;
          }
          .text-title {
            width: 300px;
            line-height: 20px;
            font-weight: 400;
            color: #545759;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            &:hover {
              color: #488af8;
            }
          }
        }
      }
    }
  }
}
</style>